/*
 * @Description: 手机号输入区域组件
 * @Author: zhenqiang.hong
 * @Date: 2019-12-05 15:29:55
 * @Last Modified by: zhenqiang.hong
 * @Last Modified time: 2019-12-25 14:34:22
 */
<template>
  <div class="flex-h flex-vc phone-wapper">
    <!-- <i class="icon iconfont icon-mphone fontsize60"></i> -->
    <img
      class="img-username"
      src="../assets/login-username.png"
    />
    <input
      type="tel"
      class="input-cmomon fontsize32 flex1 input-username"
      v-model.trim="username"
      @input="changeValue"
      placeholder="请输入手机号码"
    />
    <i
      v-show="username?true:false"
      class="icon iconfont icon-cancel-o fontsize40"
      @click="clearUsername()"
    ></i>
  </div>
</template>

<script>
export default {
  components: {

  },
  props: {
    // 手机号
    value: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      username: this.value
    }
  },
  watch: {
    value(val) { // 监听父组件传递数据，更新内部值
      this.username = val
    }
  },
  mounted() {
    // if (sessionStorage.getItem('username')) {
    //   this.username = sessionStorage.getItem('username')
    //   sessionStorage.removeItem('username')
    // }
  },
  methods: {
    changeValue(e) {
      // 给input元素的 input 事件绑定一个方法 changeValue
      // 每次执行这个方法的时候都会触发自定义事件 input，并且把输入框的值传递进去。
      this.$emit('input', e.target.value)
    },
    clearUsername() { // 清空输入框
      this.username = ''
      // this.$emit('clearUsername')
    }
  }
}
</script>

<style scoped>
/* 输入区包裹层  */
.phone-wapper {
  width: 690px;
  height: 112px;
  border-bottom: 1px solid #f2f5f6; /*no*/
}
/* 手机号、密码图标 */
/* .icon-mphone {
  color: #333;
  width: 60px;
  height: 60px;
  line-height: 60px;
  text-align: center;
} */
.img-username {
  width: 60px;
  height: 60px;
}
/* 清空图标样式 */
.icon-cancel-o {
  color: #ccc;
  width: 60px;
  height: 60px;
  line-height: 60px;
  text-align: center;
}
/* 默认输入框样式 */
.input-cmomon {
  font-weight: 400;
  color: #333;
  height: 45px;
  line-height: 45px;
  margin: 0 26px;
  border: none;
}
</style>
